<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>昭平 - 我可爱的家乡</title>
    <script src="js/tailwindcss.js"></script>
    <script src="js/swiper.js"></script>
    <link href="css/global.css" rel="stylesheet" lang="css">
</head>
<body>
<!--导航部分-->
<header class="h-[64px] w-full z-50 sticky top-0">
    <div class="max-w-7xl mx-auto w-full flex  items-center justify-between h-full">
        <div class="flex items-center gap-x-6">
            <span class="font-bold text-2xl">There is ZhaoPing</span>
            <nav class="hidden md:block">
                <ul class="list-none flex items-center gap-x-4">
                    <li>
                        <a href="index.html" class="font-bold">首页</a>
                    </li>
                    <li class="group">
                        <a>新闻</a>
                        <ul class="hidden absolute bg-white p-4 rounded-md group-hover:flex  flex-col gap-y-3">
                            <li><a href="http://www.zpol.cn/xw">本地新闻</a></li>
                            <li><a href="https://www.cctv.com/">国内新闻</a></li>
                            <li><a href="https://news.cctv.cn/world/">国际新闻</a></li>
                        </ul>
                    </li>
                    <li class="group">
                        <a>风景</a>
                        <ul class="hidden absolute bg-white p-4 rounded-md group-hover:flex  flex-col gap-y-3">
                            <li><a href="view.html">自然风光</a></li>
                            <li><a href="renwen.html">人文景观</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="foods.html">风味</a>
                    </li>
                </ul>
            </nav>
        </div>
        <a class="px-6 py-2 bg-blue-500 text-white rounded-full" href="message.html">留言</a>
    </div>
</header>
<!--当滚动超过 100px 把 header 背景色变成白色-->
<script>
    window.addEventListener('scroll', function() {
        var header = document.querySelector('header');
        var scrollDistance = window.pageYOffset || document.documentElement.scrollTop;

        if (scrollDistance > 100) {
            header.style.backgroundColor = 'white';
        } else {
            header.style.backgroundColor = ''; // 恢复默认背景色
        }
    });
</script>
<!--视频部分-->
<div class="mt-[-64px] z-0 relative h-screen flex justify-center">
    <video class="w-full h-screen object-cover" src="video/indexvideo.MP4" autoplay muted>
    </video>
    <a href="#numbers" class="rounded-full bg-black/60 text-xl  px-8 py-3 text-white absolute font-bold top-[70vh]">
        了解昭平 ↓
    </a>
</div>
<!--内容-->
<!--33万
人口
32.72
km²
1500年-->
<section id="numbers" class="max-w-7xl mx-auto p-4">
    <h3 class="text-3xl pt-4 pb-6 text-center font-bold">数说昭平</h3>
    <div class="grid grid-cols-12 gap-2 py-10">
        <div class="relative col-span-12 md:col-span-4 flex justify-center">
            <span class="text-4xl font-bold">33万</span>
            <span class="text-xs">人口</span>
        </div>
        <div class="relative col-span-12 md:col-span-4  flex justify-center">
            <span class="text-4xl font-bold">32.72</span>
            <span class="text-xs">km²</span>
        </div>
        <div class="relative col-span-12 md:col-span-4 flex justify-center">
            <span class="text-4xl font-bold">1500年</span>
            <span class="text-xs">历史</span>
        </div>
    </div>
</section>
<!--地标建筑-->
<section class="max-w-7xl mx-auto py-10 mt-20">
    <h3 class="text-3xl pt-4 pb-10 font-bold text-center">风景鉴赏</h3>
    <!--1-->
    <div class="flex justify-between gap-6">
        <img src="images/index/index1.jpg" alt="" class="rounded-xl w-[500px] object-cover aspect-[4/3]"/>
        <div class="">
            <div class="flex justify-between pb-3">
                <span class="text-2xl">江绕环城， 荷花天成 </span>
            </div>
            <p>昭平是一个位于中国的美丽城市，它以其绵延的江河和壮丽的自然景观而闻名。而在这个城市中，有一种令人陶醉的美丽花卉，那就是荷花。昭平的荷花盛开在江河的周围，构成了一幅绚丽多彩的画卷。

                昭平的荷花天成，无论是在数量上还是在品种上都令人叹为观止。当夏日的阳光洒在江河上时，荷花的花苞逐渐绽放，展现出它们独特的魅力。粉红色、白色、黄色和红色的荷花在江水的映衬下，显得格外娇艳动人。它们的花瓣柔软而丰满，仿佛是一朵朵精致的莲花，散发着淡淡的芳香。

                昭平的荷花并不仅仅是美丽的装饰，它们还承载着丰富的文化内涵。在中国文化中，荷花被视为高尚、纯洁和坚强的象征。荷花的花瓣洁白无瑕，宛如一位美丽的仙女，给人一种清新脱俗的感觉。而荷叶则宽大而坚韧，能够承受风雨的洗礼。这种坚韧的品质也象征着昭平人民的勇敢和坚毅。

                每年夏季，昭平举办盛大的荷花节，吸引了无数游客前来观赏。人们可以在荷花节期间欣赏到各种各样的荷花艺术表演，如荷花舞蹈、荷花绘画和荷花灯笼制作等。此外，还有各种美食摊位和手工艺品市场，让人们能够品尝到地道的昭平美食和购买到精美的纪念品。

                昭平的荷花是这座城市的骄傲，也是这里独特的自然景观之一。它们以其绚丽多彩的色彩和丰富的文化内涵，吸引着无数游客前来观赏和欣赏。荷花的美丽不仅仅是一种视觉享受，更是一种心灵的洗涤。在昭平的江绕环城中，荷花的盛开让人们感受到大自然的奇妙和生命的力量。</p>

        </div>
    </div>
    <!--2-->
    <div class="flex justify-between gap-6 mt-10">
        <div class="">
            <div class="flex justify-between pb-3">
                <span class=" text-2xl">江绕环城， 荷花天成 </span>
            </div>
            <p>昭平是一个位于中国的美丽城市，它以其绵延的江河和壮丽的自然景观而闻名。而在这个城市中，有一种令人陶醉的美丽花卉，那就是荷花。昭平的荷花盛开在江河的周围，构成了一幅绚丽多彩的画卷。

                昭平的荷花天成，无论是在数量上还是在品种上都令人叹为观止。当夏日的阳光洒在江河上时，荷花的花苞逐渐绽放，展现出它们独特的魅力。粉红色、白色、黄色和红色的荷花在江水的映衬下，显得格外娇艳动人。它们的花瓣柔软而丰满，仿佛是一朵朵精致的莲花，散发着淡淡的芳香。

                昭平的荷花并不仅仅是美丽的装饰，它们还承载着丰富的文化内涵。在中国文化中，荷花被视为高尚、纯洁和坚强的象征。荷花的花瓣洁白无瑕，宛如一位美丽的仙女，给人一种清新脱俗的感觉。而荷叶则宽大而坚韧，能够承受风雨的洗礼。这种坚韧的品质也象征着昭平人民的勇敢和坚毅。

                每年夏季，昭平举办盛大的荷花节，吸引了无数游客前来观赏。人们可以在荷花节期间欣赏到各种各样的荷花艺术表演，如荷花舞蹈、荷花绘画和荷花灯笼制作等。此外，还有各种美食摊位和手工艺品市场，让人们能够品尝到地道的昭平美食和购买到精美的纪念品。

                昭平的荷花是这座城市的骄傲，也是这里独特的自然景观之一。它们以其绚丽多彩的色彩和丰富的文化内涵，吸引着无数游客前来观赏和欣赏。荷花的美丽不仅仅是一种视觉享受，更是一种心灵的洗涤。在昭平的江绕环城中，荷花的盛开让人们感受到大自然的奇妙和生命的力量。</p>

        </div>
        <img src="images/index/index1.jpg" alt="" class="rounded-xl w-[500px] object-cover aspect-[4/3]"/>

    </div>
    <a href="view.html" class="text-white bg-blue-500 px-6 py-2">欣赏更多 →</a>

    <div class="py-6">
        <!--轮播-->
        <swiper>
            <swiper-container pagination="true" autoplay progress="true" parallax="true" pagination="true"
                              pagination-clickable="true" navigation="true" class="rounded-md overflow-hidden">
                <swiper-slide>
                    <img class="object-cover aspect-[16/9] w-full h-[400px]" src="images/index/slx.jpeg"
                         alt="swiper-item"/>
                </swiper-slide>
                <swiper-slide>
                    <img class="object-cover aspect-[16/9] w-full h-[400px]" src="images/index/mj.jpeg"
                         alt="swiper-item"/>
                </swiper-slide>
                <swiper-slide>
                    <img class="object-cover aspect-[16/9] w-full h-[400px]" src="images/index/gq.jpeg"
                         alt="swiper-item"/>
                </swiper-slide>
            </swiper-container>
        </swiper>
    </div>

</section>
<!--底部链接导航-->
<section class="max-w-7xl mx-auto my-10">
    <div class="flex justify-start gap-6">
        <div class="font-bold text-2xl text-gray-500 ">友情链接</div>
        <div class="p-2 flex items-center gap-4 flex-wrap">
            <a href="https://www.ylu.edu.cn/index.htm">玉林师范学院</a>
            <a href="http://webui.lw1001.cn/">原演示地址(视频服务器已关闭)</a>
        </div>
    </div>

</section>

<footer class="h-[64px] w-full">
    <div class="flex max-w-7xl mx-auto h-full justify-center gap-x-2 items-center">
        <span>202306062127</span>
        <strong>梁伟明</strong>
        <span>2023上学年WEBUI期末考试</span>
    </div>
</footer>
</body>
</html>
